import React, {Component} from "react";

class Refs extends Component{
  // 字符串ref
  showInput0 = () => {
    console.log(this.refs.input0.value)
  }

  // 回调函数ref
  showInput = () => {
    const {input1} = this
    console.log(input1.value)
  }

  // 类绑定的回调
  setInput2 = currentNode => {
    this.input2 = currentNode
    // console.log('2',this.input2)
  }
  showInput2 = () => {
    console.log(this.input2.value)
  }

  // React.createRef()
  input3 = React.createRef()
  showInput3 = () => {
    console.log(this.input3.current.value)
  }

  render() {
    return(
      <>
        <input type="text" ref="input0"/>
        <button onClick={this.showInput0}>点击弹出input0的值</button>
        <br/>
        <input type="text" ref={currentNode => this.input1 = currentNode}/>
        <button onClick={this.showInput}>点击弹出input1的值</button>
        <br/>
        <input type="text" ref={this.setInput2}/>
        <button onClick={this.showInput2}>点击弹出input2的值</button>
        <br/>
        <input type="text" ref={this.input3} onBlur={this.showInput3}/>
      </>
    )
  }
}

export default Refs
